<template>
    <view>
        <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
            <uni-group title="-物业管理查询缴费-" top="0" >
                <uni-forms-item required label="业主姓名" name="name">
                    <uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入业主姓名"></uni-easyinput>
                </uni-forms-item>
				<uni-forms-item name="info" required label="房号">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.info" placeholder="请输入房号"></uni-easyinput>
				</uni-forms-item>
                <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
            </uni-group>
            <view>
                <button class="btn" @click="submitForm('form')"><span style="color:white">查询</span></button>
            </view>
        </uni-forms>
    </view>
</template>
<script>
import { uniForms } from "@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue";
import { uniFormsItem } from "@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue";
import { uniGroup } from '@dcloudio/uni-ui/lib/uni-group/uni-group.vue';
import { uniEasyinput, uniDataCheckbox } from '@dcloudio/uni-ui';
export default {
    data() {
        return {
            formData: {
                name:'',
				info: '',
			},
            rules: {
                name: {
					rules: [{
						required: true,
						errorMessage: '请输入户主名'
					}]
				},
				info: {
					rules: [{
						required: true,
						errorMessage: '请输入房号'
					}]
				},
            },
        }
    },
    components: {
        uniForms, 
        uniFormsItem,
        uniGroup,
        uniEasyinput,
        uniDataCheckbox
    },
    methods: {
        submitForm(form) {
			this.$refs[form]
			.submit()
			.then(res => {
				console.log('表单的值：', res)
                uni.navigateTo({
                    url: "./paylist",
                });
			})
			.catch(errors => {
				console.error('验证失败：', errors)
			})
		},
        //重置表单 。原生的组件input组件不能重置表单
		resetForm() {
			this.$refs.form.resetFields()
		},
    },
}
</script>
<style scoped>
.btn {
    width: 250px; 
    background-color: #51c4d3;
}
</style>